<template>
	<view class="container">
		<uni-section title="uni.chooseImage" sub-title="主要用于选择图片文件，支持从相册或相机获取媒体文件。"></uni-section>
		<uni-section title="uni.chooseFile‌" sub-title="用于选择非媒体文件（如文档、压缩包等），支持单选或多选。"></uni-section>
		<uni-section title="uni-file-picker" sub-title="封装型组件，有前者的所有功能。"></uni-section>

		<text class="text-block padding">因为要保持更高的编码自由度，更方便地嵌入业务逻辑，未使用 picker 组件</text>

		<button @click="chooseFile">选择文件</button>
		<text v-for="(item, idx) in files" :key="idx" class="text-block">{{idx + 1}}. {{item.name}}</text>
	</view>
</template>

<script>
	import layers from '@/utils/layers';

	export default {
		data() {
			return {
				files: []
			}
		},
		methods: {
			// 选择文件
			chooseFile() {
				uni.chooseImage({
					count: -1,
					success: (res) => {
						const list = res.tempFiles;
						list.forEach(file => this.pushFile(file));
					}
				})
			},

			/**
			 * 添加文件到文件列表
			 * 
			 * 如果已经提交，则不重复。文件重复的判定标准：文件名、文件大小一致
			 */
			pushFile(f) {
				const arr = this.files;
				for (var i = 0; i < arr.length; i++) {
					const file = arr[i];
					if (file.name === f.name && file.size === f.size) {
						layers.msg('重复上传文件：' + file.name)
						return;
					}
				}
				arr.push(f);
			},


			// 上传文件
			uploadFile() {
				if (!this.filePath) {
					layers.msg('请先选择文件：' + file.name)
					return
				}

				uni.showLoading({
					title: '上传中...'
				})

				const uploadTask = uni.uploadFile({
					url: 'https://your-server.com/upload', // 替换为你的服务器地址
					filePath: this.filePath,
					name: 'file',
					formData: {
						'userId': '123', // 可以附加其他表单数据
						'token': 'your-token'
					},
					success: (uploadRes) => {
						uni.hideLoading()
						this.result = JSON.stringify(uploadRes.data)
						layers.msg('上传成功：' + file.name)
					},
					fail: (err) => {
						console.error(err)
						uni.hideLoading()
						layers.msg('上传失败：' + file.name)
					}
				})

				// 监听上传进度
				uploadTask.onProgressUpdate((res) => {
					this.uploadProgress = res.progress
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
	}

	button {
		margin: 10px 0;
	}
</style>